<div class="container">
    <div class="title-desc">
        <h2>Engine</h2>
        <span>The catapult engine registration page. The engine is required to run the job queue. (<a href="https://docs.opencatapult.net/home/concept#engine-registrationn" target="_blank">more...</a>)</span>
    </div>
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div>
          <mat-select placeholder="Engine Status"
            (selectionChange)="onStatusFilterChanged()" [formControl]="statusFilter">
            <mat-option *ngFor="let status of engineStatus" [value]="status.value">
              {{status.text}}
            </mat-option>
          </mat-select>
      </div>
      <div class="action-buttons">
        <button mat-raised-button (click)="onRegisterEngineClick()">Register New Engine</button>
      </div>
    </div>

    <app-loading-spinner *ngIf="loading"></app-loading-spinner>
    <div *ngIf="!loading">
      <div class="no-records" *ngIf="engines?.length <= 0">
        No Engines Found
      </div>

      <table mat-table [dataSource]="engines" matSort *ngIf="engines?.length > 0" class="mat-elevation-z8">

        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
          <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <!-- Version Column -->
        <ng-container matColumnDef="version">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Version </th>
          <td mat-cell *matCellDef="let element"> {{element.version}} </td>
        </ng-container>
        <!-- LastSeen Column -->
        <ng-container matColumnDef="lastSeen">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Seen </th>
          <td mat-cell *matCellDef="let element"> {{element.lastSeen | date:'MMM d, y, H:mm' }} </td>
        </ng-container>

        <!-- Action Column -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef> </th>
          <td mat-cell *matCellDef="let element" class="item-buttons">
            <button mat-icon-button (click)="onTokenClick(element)" matTooltip="Generate token" *ngIf="statusFilter.value === 'active'" appHelpElement="Engine" subSection="Engine Token">
              <mat-icon>vpn_key</mat-icon>
            </button>
            <button mat-icon-button (click)="onSuspendClick(element)" matTooltip="Suspend" *ngIf="statusFilter.value === 'active'">
              <mat-icon>archive</mat-icon>
            </button>
            <button mat-icon-button (click)="onActivateClick(element)" matTooltip="Activate" *ngIf="statusFilter.value === 'suspended'">
              <mat-icon>unarchive</mat-icon>
            </button>
            <button mat-icon-button  matTooltip="Delete" (click)="onDeleteClick(element)">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

</div>
